<template>
  <div class="customerVip">
    <!-- 登录管理 -->
    <!-- <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <p class="title">法治云</p>
        <el-form-item label="账号" prop="userName">

          <el-input type="text" v-model.trim="ruleForm.userName" auto-complete="off" placeholder="请输入您的账号" @blur="changBlur"> </el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model.trim="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')" @blur="changBlur" auto-complete="off" placeholder="请输入您的密码">
          </el-input>
        </el-form-item>

        <el-form-item v-show='isShow'>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
      </el-form> -->
    <h3 class="title">法治云</h3>
    <van-form @submit="onSubmit">

      <div class="form_item">

        <img class="icon" src="../assets/image/user_icon.png" alt="">
        <van-field v-model="username" name="username" label="" placeholder="用户名" :rules="[{ required: true, message: '请输入用户名' }]" />
      </div>

      <div class="form_item">

        <img class="icon" src="../assets/image/password_icon.png" alt="">
        <van-field v-model="password" type="password" name="password" label="" placeholder="密码" :rules="[{ required: true, message: '请输入密码' }]" />

      </div>

      <div class="confirm">
        <van-button round block type="info" native-type="submit">立即登录</van-button>
        <van-button block native-type="reset">重置</van-button>
      </div>

    </van-form>

  </div>
</template>
<style>
#app {
  width: 100%;
  height: 100%;
}
.customerVip {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../assets/image/login_img_bg@2x.png") no-repeat;
  background-size: 100% 100%;
}

.customerVip h3 {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 15%;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
}

.customerVip .van-form {
  position: absolute;
  left: 50%;
  top: 50%;
  text-align: center;
  margin-left: -20%;
  margin-top: -45%;
  width: 70%;
  height: 50%;
}
.customerVip .confirm {
  position: fixed;
  bottom: 30%;
  width: 80%;
  margin: 0 -20%;
}
.customerVip .confirm .van-button--normal {
  font-size: 16px;
}
.customerVip .form_item {
  position: relative;
  margin-bottom: 15px;
}
.customerVip .icon {
  position: absolute;
  top: 15px;
  left: -25px;
  z-index: 1000;
}
.customerVip .van-field__control {
  background-color: #fff !important;
  height: 50px;
  line-height: 50px;
  padding: 0 10px;
  border-bottom: 1px solid #e5e5e5;
}
.customerVip .van-button--default {
  color: #2656fb;
  background-color: inherit !important;
  border: none;
}
</style>
<script>
import path from '@/network'
export default {
  data () {
    return {
      logining: false,
      username: '',
      password: '',
      isShow: true
    };
  },

  mounted () {
  },
  methods: {
    onSubmit (values) {
      if (values) {
        this.login(values)
      } else {
        console.log('error submit!!');
        return false;
      }
    },

    login (values) {
      path.login({
        userName: values.username,
        password: values.password
      }
      ).then(res => {
        if (res.success == 0) {
          localStorage.setItem("islogin", true)
          this.$router.push('/index')
        }
      })
    },

    reset () {
      this.username = ''
      this.password = ''
    }
  },

};
</script>